import { useState } from "react";
import { Router } from "../routes";
import useRouter from "../hooks/useRouter";
import Relations from "./Relations";
import Reverse from "./Reverse";
export default function Home() {
  const route = useRouter()
  const [showRelations, setShowRelations] = useState<boolean>(false)
  const [showReverse, setShowReverse] = useState<boolean>(false)
  
  const handleClick = (index: number) => {
    setShowRelations(index === 0)
    setShowReverse(index === 1)
  }
  return (
    <div>
      <Relations show={showRelations} />
      <Reverse show={showReverse} />
      <h1>{route}</h1>
      <div>
        <button onClick={() => handleClick(0)}>Relations</button>
      <button onClick={() => handleClick(1)}>Reverse</button>
      <button onClick={() => Router.pushRoute('/first')}>first</button>
      </div>
    </div>
  );
}